import React from 'react';
import { Bot } from 'lucide-react';

export function TypingIndicator() {
  return (
    <div className="flex gap-3 mb-6 items-start">
      <div className="flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center bg-blue-100">
        <Bot className="w-6 h-6 text-blue-600" />
      </div>
      <div className="relative max-w-[80%] pr-4">
        <div className="p-4 rounded-lg bg-white border border-gray-200">
          <div className="flex items-center text-gray-500">
            <span className="mr-2">思考中</span>
            <div className="flex space-x-1">
              <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0s' }}></div>
              <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div>
              <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0.4s' }}></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
} 